@tailwind base;
@tailwind components;
@tailwind utilities;

/* 基础样式重置 */
@layer base {
  html {
    @apply antialiased;
  }
  
  body {
    @apply bg-gray-50 text-gray-900;
  }
}

/* 自定义过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动过渡 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter-from {
  transform: translateX(-100%);
}
.slide-leave-to {
  transform: translateX(100%);
}

/* 缩放过渡 */
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.3s ease;
}
.scale-enter-from,
.scale-leave-to {
  transform: scale(0.95);
}

/* 卡片悬停效果 */
.card-hover {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* 按钮基础样式 */
.btn {
  @apply px-4 py-2 rounded-md transition-all duration-200 font-medium;
}

.btn-primary {
  @apply btn bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

/* 输入框基础样式 */
.input {
  @apply px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* 标题样式 */
.title {
  @apply text-2xl font-bold text-gray-900 mb-4;
}

.subtitle {
  @apply text-xl font-semibold text-gray-800 mb-3;
}

/* 容器样式 */
.container-custom {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* 网格布局 */
.grid-custom {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* 加载动画 */
.loading {
  @apply animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-blue-600;
}

/* 文本截断 */
.text-truncate {
  @apply overflow-hidden text-ellipsis whitespace-nowrap;
}

/* 响应式图片容器 */
.img-container {
  @apply relative w-full h-0 pb-[56.25%] overflow-hidden;
}

.img-container img {
  @apply absolute top-0 left-0 w-full h-full object-cover;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full hover:bg-gray-500;
}